<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-11-01 09:18:18
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-02-02 09:14:08
 * @FilePath: \vue-admin-template\src\components\formCollect\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 填写表单 -->
<template>
    <div>
        <div style="margin-bottom: 7px;">
            <img @click="clickBack" style="vertical-align: bottom;margin-right: 10px;cursor: pointer;"
                src="@/assets/icon/返回.png" alt="">
            <span class="normal-text" style="font-size: 19px;">{{ name }}维修-维修</span>
        </div>
        <div class="formItem-main">
            <section>
                <div class="title-box-name">维修内容</div>
                <div style="margin-top: 20px;">
                    <el-input type="textarea" :autosize="{ minRows: 6 }" placeholder="请输入内容" v-model="textarea">
                    </el-input>
                </div>
                <div style="margin-top: 20px;">
                    <el-button type="primary" class="noraml-btn" @click="sumbitInfo">提交</el-button>
                    <el-divider></el-divider>
                </div>
            </section>
            <section>
                <div class="title-box-name">维修履历</div>
                <div style="margin-top: 20px;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="维修时间">
                            <el-date-picker style="width: 100%;" value-format="yyyy-MM" v-model="times" type="month"
                                placeholder="选择月" :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="searchItem">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="seeAll">显示全部</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div ref="tableMain">
                    <div style="overflow:auto;" :style="{ 'height': tableHeight + 'px' }">
                        <div v-for="(item, index) in tableList" :key="index">
                            <div class="time" style="display: flex;align-items: center;">
                                <div
                                    style="width: 10px;height: 10px;border-radius: 50%;background-color: #5CD8DA;margin-right: 10px;">
                                </div>
                                <div style="font-size: 18px;">
                                    {{ item.operTime }}
                                </div>
                                <div style="margin-left: 40px;">
                                    <el-button type="text" @click="clickEdit(item)">修改</el-button>
                                    <el-button type="text" v-if="item.canEdit" @click="clickSave(item)">提交</el-button>
                                    <el-button type="text" @click="clickDelete(item.id)">删除</el-button>
                                </div>
                            </div>
                            <div
                                style="border-left: 3px solid #DFDFDF;margin-left: 3px;padding: 20px;padding-bottom: 40px;">
                                <div
                                    style="padding: 20px;background-color: #F5F7FB;color: #434444;line-height: 1.5;border-radius: 5px;">
                                    <el-input v-if="item.canEdit" type="textarea" autosize placeholder="请输入内容"
                                        v-model="item.content">
                                    </el-input>
                                    <span v-else> {{ item.content }}</span>
                                </div>
                            </div>

                        </div>
                        <div style="text-align: center;" v-if="showPageNo">
                            <img src="@/assets/defaultLoad.png" alt="">
                        </div>
                    </div>
                </div>
            </section>
        </div>

    </div>
</template>
  
<script>
import Cookies from 'js-cookie';
export default {

    props: {
        id: {
            type: [String, Number]
        },
        name: {
            type: String
        }

    },
    data() {
        return {
            textarea: '',
            fileList: [],
            headers: {},
            canEdit: true,
            options: [],
            formInline: {
                user: '',
                region: '',
                itemReviewFiles: []
            },
            edit: false,
            activeName: '资材清单明细',
            dialogVisible: false,
            // 报价评审单 --详情0 ；报价评审单--重新填单 1；技术部长分配--详情 2  技术评审-详情 3
            canEdit: true,
            times: '',
            tableList: [],
            showPageNo: false,
            tableHeight: 300,
        }
    },
    mounted() {
        // 上传请求头
        this.times = this.getTime();
        this.searchDetail();
        this.$nextTick(res => {
            const tableHeight = document.documentElement.clientHeight;
            const topHeight = this.$refs.tableMain.getBoundingClientRect().top + 70;
            this.tableHeight = tableHeight - topHeight;
        })
    },
    computed: {
        listenHeight() {
            return this.$store.state.user.heightSize
        }
    },
    watch: {
        listenHeight(val) {
            const tableHeight = document.documentElement.clientHeight;
            const topHeight = this.$refs.tableMain.getBoundingClientRect().top + 70;
            this.tableHeight = tableHeight - topHeight;

        }
    },
    methods: {
        searchItem() {
            if (!this.times) {
                this.times = this.getTime();
            };
            this.searchDetail();
        },
        getTime() {
            let date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            return y + '-' + m
        },
        clickEdit(row) {
            row.canEdit = !row.canEdit;
        },
        clickDelete(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$baseRequest('/mold/maintain-record/delete/' + id, {}, {}, 'delete').then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.searchDetail();
                })
            })
        },
        searchDetail() {
            this.$baseRequestGetParams('/mold/maintain-record/getList', { parentId: this.id, date: this.times }, {}, 'get').then(res => {
                this.tableList = res.data;
                this.showPageNo = this.tableList.length == 0 ? true : false;
                this.tableList.forEach(item => {
                    this.$set(item, 'canEdit', false);
                });
            })
        },
        load() {

        },
        seeAll() {
            this.times = '';
            this.searchDetail();
        },
        clickBack() {
            this.$emit('closeformCollect')
        },
        clickSave(row) {
            if (!row.content) {
                this.$message.warning('请输入内容');
                return;
            };
            this.$baseRequest('/mold/maintain-record/revise', { parentId: this.id, content: row.content, id: row.id }, {}, 'put').then(res => {
                this.$message.success('提交成功');
                this.searchDetail();
            })
        },
        sumbitInfo() {
            if (!this.textarea) {
                this.$message.warning('请输入内容');
                return;
            };
            this.$baseRequest('/mold/maintain-record/create', { parentId: this.id, content: this.textarea }, {}, 'post').then(res => {
                this.$message.success('提交成功');
                this.textarea = '';
                this.searchDetail();
            })
        }
    }
}
</script>
<style>
.el-upload-list--picture {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.el-upload-list__item {
    width: 300px;
}
</style>
<style lang="scss" scoped>
.formItem-main {
    margin-top: 10px;
    padding: 40px 30px;
    border: 1px solid #E4E6EC;
    background-color: #fff;


    .title {
        font-size: 26px;
    }
}

.downFile-box {
    position: absolute;
    right: 20px;
    top: 35%;
    color: #5CD8DA;
    cursor: pointer;
}

.file-list-styles {
    background-color: #E0EFFC;
    border-radius: 5px;
    text-align: center;
    line-height: 70px;
    font-size: 18px;
}

.title-box-name {
    position: relative;
    margin-left: 10px;
    font-size: 18px;
}

.title-box-name::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0px;
    width: 4px;
    height: 19px;
    border-radius: 2px;
    background-color: #5CD8DA;

}
</style>
  